<template>
	<view class="endOrder" v-if="pageData.length">
		<swiper :indicator-dots="false" 
		        :autoplay="true" 
				:interval="4500" 
				:duration="1500"
				circular
				:current="current"
				@change="changeMyOrder"
				class="Order_bannel">
			<swiper-item class="d-flex a-center" v-for="(item,index) in pageData" :key="index" 
			             @click="toDetail(item.order_id, item.table_code_id)">
				<image :src="$imgUrls(item.goodsImg)" mode="aspectFill" class="myOrder_img"></image>
				<view class="flex-1 height d-flex f-column j-se m-left20">
					<view class="row a-center">
						<text class="color_33 size28 m-right20">{{item.title}}</text>
						<text class="color_99 h6">{{item.dateText}}</text>
					</view>
					<view class="ellipsis h6 color_99">{{item.goodsText}}</view>
				</view>
				<view class="myOrder_state m-left10 m-right16">{{item.buttonText}}</view>
			</swiper-item>
			
		</swiper>
		
		<view class="indicator-dots d-flex a-center j-centert " v-if="pageData.length > 1">
			<view class="dots" 
			     :class="{'dots_active':index == current}" 
				 v-for="(item,index) in pageData" :key="index"></view>
		</view>
	</view>
	
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name:'orderStatus',
		data() {
			return {
				current:0,
				pageData:[],
			}
		},
		created() {
			if(!this.vid) return;
			this.getMyOrderInfo();
		},
		methods: {
			getMyOrderInfo(){
				this.$http.post({
					url:'/singleSaleApi/getMyOrderInfo',
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg);
					const result = res.data || [];
					this.pageData = result;
				})
			},
			changeMyOrder(e){
				this.current = e.detail.current;
			},
			toDetail(order_id, tid){
				if (tid == 0) return this.toUrl('/orderPage/order/orderDetail?order_id=' + order_id)
				this.toUrl('/otherPage/custom/viewOrder?order_id=' + order_id + '&tid=' + tid)
			}
		},
		computed:{
			...mapState(['vid'])
		}
	}
</script>

<style lang="scss" scoped>
	.endOrder{
		width:700rpx;
		background-color: #FFFFFF;
		padding:20rpx 30rpx 30rpx 30rpx;
		margin:20rpx auto;
		border-radius: 10rpx;
		position: relative;
	}
	
	.Order_bannel{
		width:100%;
		background-color: #f5f5f5;
		height: 100rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.myOrder_img{
		width:100rpx;
		height: 100rpx;
		border-radius: 6rpx;
	}
	.myOrder_state{
		min-width:130rpx;
		height: 50rpx;
		padding:0 10rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 25rpx;
		font-size:24rpx;
		border:1rpx solid #e24723;
		color:#e24723;
	}
	.indicator-dots{
		width:100%;
		position: absolute;
		bottom: 10rpx;
		left:0;
	}
	.dots{
		width:8rpx;
		height: 8rpx;
		border-radius: 50%;
		background-color: #ccc;
		margin:0 4rpx;
	}
	.dots_active{
		background-color: #e24723;
	}
</style>
